<%@ Page Language="C#" MasterPageFile="~/_Templates/MasterPages/Default.master" AutoEventWireup="true" CodeFile="text.aspx.cs" Inherits="image_manipulation_text" Title="Untitled Page" %>
<asp:Content ID="MainContent" ContentPlaceHolderID="MainContentPlaceHolder" Runat="Server" EnableViewState="false">

<h1>Image Manipulation</h1>
<h2>Text</h2>
<p>The <strong>ImageText</strong> control creates jpegs/gifs based upon a string of text.</p>
<p>The control can render in one of two ways:</p>
<ul>
	<li><strong>ImageTag</strong> - the rendered HTML is a straightforward &lt;img /&gt; tag with the alt attribute the string of text.</li>
	<li><strong>ClientScriptReplace</strong> - here you can write your own HTML tag within the control. The control will generate the text image, however, rather than rendering an image tag, the control uses client side JavaScript to replace the inner contents of you HTML tag with the new image. This means that only browsers with JavaScript enabled will see the text image which can help when search engines etc spider your site. Great for header text image replacements.</li>
</ul>
<p>The control gives you full control of the overall text quality and justify settings.</p>

<h3>RenderType - ImageTag</h3>
<pre class="csharpcode">
<span class="kwrd">&lt;</span><span class="html">DNAide:ImageText</span> <span class="attr">ID</span><span class="kwrd">="Text1"</span> <span class="attr">runat</span><span class="kwrd">="server"</span> <span class="attr">Text</span><span class="kwrd">="RenderType - ImageTag"</span> <span class="attr">FontFamily</span><span class="kwrd">="Arial"</span> 
  <span class="attr">FontSize</span><span class="kwrd">="20"</span> <span class="attr">FontStyle</span><span class="kwrd">="Bold"</span> <span class="attr">ForeColor</span><span class="kwrd">="#728c40"</span> <span class="attr">BackColor</span><span class="kwrd">="White"</span> <span class="attr">WriteOption</span><span class="kwrd">="Overwrite"</span> <span class="kwrd">/&gt;</span></pre>

<DNAide:ImageText ID="Text1" runat="server" Text="RenderType - ImageTag" FontFamily="Arial" FontSize="20" FontStyle="Bold" ForeColor="#728c40" BackColor="White" WriteOption="Overwrite" />

<h3>RenderType - ClientScriptReplace</h3>
<pre class="csharpcode">
<span class="kwrd">&lt;</span><span class="html">DNAide:ImageText</span> <span class="attr">ID</span><span class="kwrd">="Text2"</span> <span class="attr">runat</span><span class="kwrd">="server"</span> <span class="attr">Text</span><span class="kwrd">="RenderType - ClientScriptReplace"</span> 
  <span class="attr">FontFamily</span><span class="kwrd">="Comic Sans MS"</span> <span class="attr">FontSize</span><span class="kwrd">="20"</span> <span class="attr">FontStyle</span><span class="kwrd">="Bold"</span> <span class="attr">ForeColor</span><span class="kwrd">="#4D87CE"</span> <span class="attr">BackColor</span><span class="kwrd">="White"</span> 
  <span class="attr">WriteOption</span><span class="kwrd">="Overwrite"</span> <span class="kwrd">/&gt;</span></pre>

<p>or:</p>
<pre class="csharpcode">
<span class="kwrd">&lt;</span><span class="html">DNAide:ImageText</span> <span class="attr">ID</span><span class="kwrd">="ImageText1"</span> <span class="attr">runat</span><span class="kwrd">="server"</span> <span class="attr">FontFamily</span><span class="kwrd">="Comic Sans MS"</span> <span class="attr">FontSize</span><span class="kwrd">="20"</span> 
  <span class="attr">FontStyle</span><span class="kwrd">="Bold"</span> <span class="attr">ForeColor</span><span class="kwrd">="#4D87CE"</span> <span class="attr">BackColor</span><span class="kwrd">="White"</span> <span class="attr">WriteOption</span><span class="kwrd">="Overwrite"</span><span class="kwrd">&gt;</span>
    <span class="kwrd">&lt;</span><span class="html">h2</span> <span class="attr">id</span><span class="kwrd">="##DNAideTextImage##"</span><span class="kwrd">&gt;</span>RenderType - ClientScriptReplace<span class="kwrd">&lt;/</span><span class="html">h2</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;/</span><span class="html">DNAide:ImageText</span><span class="kwrd">&gt;</span></pre>

<DNAide:ImageText ID="ImageText1" runat="server" FontFamily="Comic Sans MS" FontSize="20" FontStyle="Bold" ForeColor="#4D87CE" BackColor="White" WriteOption="Overwrite">
	<h2 id="##DNAideTextImage##">RenderType - ClientScriptReplace</h2>
</DNAide:ImageText>

<DNAide:ImageText ID="Text2" runat="server" Text="RenderType - ClientScriptReplace" FontFamily="Comic Sans MS" FontSize="20" FontStyle="Bold" ForeColor="#4D87CE" BackColor="White" WriteOption="Overwrite" />

<h3>RenderType - ClientScriptReplace</h3>
<p>Allows you to set a color to be flagged as transparent if creating a text image as a gif (which is by default). This is useful if you have to blend the anti-aliasing of a font with a background color on your website. The example below has set <strong>Blue</strong> as the background color for the image with <strong>Blue</strong> to be transparent when saving as a gif:</p>
<pre class="csharpcode">
<span class="kwrd">&lt;</span><span class="html">DNAide:ImageText</span> <span class="attr">ID</span><span class="kwrd">="Text3"</span> <span class="attr">runat</span><span class="kwrd">="server"</span> <span class="attr">Text</span><span class="kwrd">="Transparent Color"</span> <span class="attr">FontFamily</span><span class="kwrd">="Trebuchet MS"</span> 
  <span class="attr">FontSize</span><span class="kwrd">="20"</span> <span class="attr">FontStyle</span><span class="kwrd">="Bold"</span> <span class="attr">ForeColor</span><span class="kwrd">="White"</span> <span class="attr">BackColor</span><span class="kwrd">="Blue"</span> <span class="attr">OutputGifTransparentColor</span><span class="kwrd">="Blue"</span> 
  <span class="attr">WriteOption</span><span class="kwrd">="Overwrite"</span> <span class="kwrd">/&gt;</span></pre>

<DNAide:ImageText ID="Text3" runat="server" Text="Transparent Color" FontFamily="Trebuchet MS" FontSize="20" FontStyle="Bold" ForeColor="White" BackColor="Blue" OutputGifTransparentColor="Blue" WriteOption="Overwrite" />

<h3>Long text / wrapping</h3>
<p>You can define a maximum height and text will wrap.</p>
<pre class="csharpcode">
<span class="kwrd">&lt;</span><span class="html">DNAide:ImageText</span> <span class="attr">ID</span><span class="kwrd">="Text4"</span> <span class="attr">runat</span><span class="kwrd">="server"</span> <span class="attr">Text</span><span class="kwrd">="This is some long text. It goes on and on and on 
and on on and on and on and on on and on and on and on...."</span> <span class="attr">MaxWidth</span><span class="kwrd">="700"</span>
  <span class="attr">FontFamily</span><span class="kwrd">="Comic Sans MS"</span> <span class="attr">FontSize</span><span class="kwrd">="20"</span> <span class="attr">FontStyle</span><span class="kwrd">="Bold"</span> <span class="attr">ForeColor</span><span class="kwrd">="#4D87CE"</span> <span class="attr">BackColor</span><span class="kwrd">="White"</span> 
  <span class="attr">WriteOption</span><span class="kwrd">="Overwrite"</span> <span class="kwrd">/&gt;</span></pre>

<DNAide:ImageText ID="Text4" runat="server" Text="This is some long text. It goes on and on and on and on on and on and on and on on and on and on and on...." MaxWidth="700" FontFamily="Comic Sans MS" FontSize="20" FontStyle="Bold" ForeColor="#4D87CE" BackColor="White" WriteOption="Overwrite" />

</asp:Content>

